<html>

<head>
  <style type="text/css">
    * {
      padding: 0px;
      margin: 0px;
    }

    input {
      border: 1px solid blue;
    }

    input:focus {
      outline: 1px solid red;
    }

    div.outline {
      margin-top: 20px;
      width: 100px;
      height: 50px;
      outline: 10px solid red;
    }

    div.border {
      margin-top: 20px;
      width: 100px;
      height: 50px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <input placeholder="outline和border的区别"></input>
  <div class="outline">outline元素不占宽高</div>
  <div class="border">border元素占宽高</div>
</body>

</html>